<template>
  <div class="servicePageOrderView pd-20">
    <div class="detailView">
      <div class="detail"
           v-if="item.userDto">
        <div class="name">用户头像</div>
        <div class="value">
          <img :src="item.userDto.headImageUrl"
               alt="工作室头像"
               preview="bannerView"
               style="width: 100px;height:100px;border-radius: 50%">
        </div>
      </div>
      <div class="detail"
           v-if="item.userDto">
        <div class="name">用户</div>
        <div class="value">{{item.userDto.nickName}}</div>
      </div>
      <div class="detail">
        <div class="name">订单编号</div>
        <div class="value">{{item.orderNumber}}</div>
      </div>
      <div class="detail">
        <div class="name">订单名称</div>
        <div class="value">{{item.tradeName}}</div>
      </div>
      <div class="detail">
        <div class="name">工作室</div>
        <div class="value">{{item.studioName}}</div>
      </div>
      <div class="detail">
        <div class="name">医院</div>
        <div class="value">{{item.hospital_name}}</div>
      </div>
      <div class="detail">
        <div class="name">金额</div>
        <div class="value">{{item.money}}元</div>
      </div>
      <div class="detail">
        <div class="name">剩余时长</div>
        <div class="value">{{item.totalMonth-item.usedMonth}}月</div>
      </div>
      <div class="detail">
        <div class="name">合计时长</div>
        <div class="value">{{item.totalMonth}}月</div>
      </div>
      <div class="detail">
        <div class="name">订单类型</div>
        <div class="value">{{item.orderType|orderType}}</div>
      </div>
      <div class="detail">
        <div class="name">订单状态</div>
        <div class="value">{{item.orderStatus|orderStatus}}</div>
      </div>
      <div class="detail">
        <div class="name">支付订单号</div>
        <div class="value">{{item.payInfo}}</div>
      </div>
      <div class="detail">
        <div class="name">支付类型</div>
        <div class="value">{{item.payType|payType}}</div>
      </div>
      <div class="detail">
        <div class="name">支付时间</div>
        <div class="value">{{commonFunction.timestampFormat(new Date(item.paymentDate), 'yyyy-MM-dd hh:mm:ss')}}</div>
      </div>
      <div class="detail">
        <div class="name">患者信息</div>
        <div class="value"></div>
      </div>
      <Table :columns="tableCol1"
             :data="item.member"></Table>
      <div class="detail">
        <div class="name">服务详情</div>
        <div class="value"></div>
      </div>
      <Table :columns="tableCol2"
             :data="item.orderItems"></Table>
      <p class="mt-20 goPage"
         align="center">
        <el-button @click="goPage"
                   type="primary">返 回</el-button>
      </p>
    </div>
  </div>
</template>

<script>
  import { orderMgt } from '@/api/codeName'
  export default {
    name: "servicePageOrderView",
    data () {
      return {
        item: {},
        tableCol1: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + 1);
            }
          },
          {
            title: '头像',
            key: 'headImageUrl',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.headImageUrl,
                    preview: 'wdStudioList'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '10px',
                    borderRadius: '50%'
                  }
                }),
              ]);
            }
          },
          {
            title: '姓名',
            key: 'name',
          },
          {
            title: '身份证号',
            key: 'idCard',
          },
          {
            title: '出生日期',
            key: 'age',
          },
          {
            title: '性别',
            key: 'sex',
            render: (h, params) => {
              return h('span', params.row.sex == 1 ? '男' : '女')
            }
          }
        ],
        tableCol2: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + 1);
            }
          },
          {
            title: '头像',
            key: 'doctor_img',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.doctor_img,
                    preview: 'servicePageOrderMgt'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '10px',
                    borderRadius: '50%'
                  }
                }),
              ]);
            }
          },
          {
            title: '医生',
            key: 'doctor_name',
          },
          {
            title: '科室',
            key: 'department_name',
          },
          {
            title: '医院',
            key: 'hospital_name',
          },
          {
            title: '金额（元）',
            key: 'perPrice',
          },
          {
            title: '有效时长（月）',
            key: 'monthCount',
          },
          {
            title: '剩余时长（月）',
            key: 'monthServCount',
            render: (h, params) => {
              return h('span', params.row.monthCount - params.row.monthServCount);
            }
          },
          {
            title: '合计服务次数（次）',
            key: 'count',
          },
          {
            title: '合计已服务次数（次）',
            key: 'servCount',
          },
          {
            title: '月服务次数（次）',
            key: 'servCount',
          },
          {
            title: '月服务剩余次数（次）',
            key: 'remainingCount',
          },
        ],
      }
    },
    mounted () {
      this._getViewById()
    },
    methods: {
      _getViewById () {
        this.ajax({
          type: this.api.servicePageOrderView.type,
          url: this.api.servicePageOrderView.url,
          data: {
            id: this.$route.query.id
          },
          success: (data) => {
            this.item = data.object
            this.item.member = [this.item.member]
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      goPage () {
        this.$router.push({ name: 'servicePageOrderMgt' });
      }
    },
    filters: {
      orderType: (value) => {
        for (let i = 0; i < orderMgt.servicePageOrderMgt.orderType.length; i++) {
          if (value == orderMgt.servicePageOrderMgt.orderType[i].code) {
            return orderMgt.servicePageOrderMgt.orderType[i].name
          }
        }
        return value
      },
      orderStatus: (value) => {
        for (let i = 0; i < orderMgt.servicePageOrderMgt.orderStatus.length; i++) {
          if (value == orderMgt.servicePageOrderMgt.orderStatus[i].code) {
            return orderMgt.servicePageOrderMgt.orderStatus[i].name
          }
        }
        return value
      },
      payType: (value) => {
        for (let i = 0; i < orderMgt.servicePageOrderMgt.payType.length; i++) {
          if (value == orderMgt.servicePageOrderMgt.payType[i].code) {
            return orderMgt.servicePageOrderMgt.payType[i].name
          }
        }
        return value
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .servicePageOrderView {
  }
  .goPage {
    padding-bottom: 20px;
  }
</style>
